<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <form ref="loginForm" :model="loginForm">
      <input v-model="loginForm.username" placeholder="用户名">
      <input v-model="loginForm.password" placeholder="密码">
      <input v-model="loginForm.code" placeholder="验证码">
      <span @click="getCaptchaImage">
         <img :src="validateCodeImage">
      </span>
      <span @click="handleSubmit(loginForm)" type="button">点击登录</span>
    </form>
    <a href="temp/index.vue">跳转</a>
  </div>
</template>

<script>
import Axios from 'axios'

export default {
  name: 'login',
  data () {
    return {
      msg: '来了老弟',
      validateCodeImage: 'http://localhost:12000/api/v1/getcode',
      loginForm: {
        username: '',
        password: '',
        code: ''
      }
    }
  },
  methods: {
    getCaptchaImage () {
      this.validateCodeImage = ''
      console.log('我进来了')
      var url = 'http://localhost:12000/api/v1/getcode'
      Axios.get(url).then((response) => {
        this.validateCodeImage = url
      })
    },
    handleSubmit (data) {
      var url = 'http://localhost:12000/api/v1/user/login'
      Axios.post(url, data)
        .then(function (response) {
          let code = response.data.code
          console.log(code)
          if (code === 200) {
            this.$router.push({path: '/blog'})
          } else if (code === 500) {
            this.$router.push({path: 'HelloWord'})
          }
        }.bind(this)).catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
